<template>
  <div class="index">
    <h3>vant-按钮</h3>

    <!-- 按钮类型 default success primary danger warning -->
    <van-button type="default">默认按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-button type="warning">警告按钮</van-button>

    <!-- 非填充式按钮 plain -->
    <van-button plain type="warning">警告按钮</van-button>

    <!-- 较细的边框设置 hairline -->
    <van-button plain hairline type="warning">警告按钮</van-button>

    <!-- 禁用按钮状态 -->
    <van-button disabled type="primary">处于禁用状态</van-button>

    <!-- 按钮加载状态 -->
    <van-button loading type="primary" loading-type="spinner" loading-size="20px" loading-text="加载中..."></van-button>

    <!-- 按钮形状 -->
    <van-button square type="primary" size="normal">普通按钮</van-button>
    <van-button round  type="primary" size="normal">普通按钮</van-button>
    
    <!-- 图标按钮 -->
    <van-button icon="plus" type="primary">按钮</van-button>
    <van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="primary">按钮</van-button>

    <!-- 按钮尺寸 -->
    <van-button type="primary" size="mini">迷你按钮</van-button>
    <van-button type="primary" size="small">小型按钮</van-button>
    <van-button type="primary" size="normal">普通按钮</van-button>
    <van-button type="primary" size="large">大号按钮</van-button>

    <!-- 块级元素 -->
    <van-button block>按钮块级元素</van-button>
    
    <!-- 页面导航 -->
    <van-button type="primary" url="/vant/mobile.html"></van-button>
    <van-button type="primary" to="index"></van-button>

    <!-- 自定义颜色 -->
    <van-button color="#7232dd">单色按钮</van-button>
    <van-button color="#7232dd" plain>单色非填充按钮</van-button>
    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)">渐变色按钮</van-button>

    <!-- 按钮的两个默认的事件 -->
    <van-button @click="clickBtn">点击按钮事件</van-button>
    <van-button @touchstart="touchBtn">触摸按钮事件</van-button>
    
  </div>
</template>

<script>
export default {
  name: 'Button',
  props: {
    msg: String
  },


  methods:{
    clickBtn(e){
      console.log("点击事件的处理");
      console.log( e );
    },
    touchBtn(e){
      console.log("触摸事件的处理");
      console.log(e);
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  border: 1px solid yellow;
}
</style>
